<template>
  <div class="box">
    <p class="box-title">能源系统运营驾驶舱</p>
    <span class="full" @click="info">全屏</span>
    <div class="top-box">
      <div class="top-title"><h1>当日能源消耗统计</h1></div>
      <div class="box1-charts">
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 26vw" :option="option8" /></div>
        <div>
          <e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 30vw" :option="option9" />
        </div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 26vw" :option="option10" /></div>
      </div>
    </div>
    <div class="m-box">
      <div class="box1-title"><h1>月度能源消耗以及碳排放统计</h1></div>
      <div class="box1-charts">
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 24vw" :option="option1" /></div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 24vw" :option="option2" /></div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 19vw" :option="option3" /></div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.2vw;width: 19vw" :option="option11" /></div>
      </div>
    </div>
    <div class="bottom-box">
      <div class="box2">
        <div class="title1"><span>>></span>单台燃动费</div>
        <div>
          <div><e-charts autoresize style="height: 27vh;margin-left: 0.1vw;margin-top:1vh;width: 34vw" :option="option6" /></div>
        </div>
      </div>
      <div class="box3">
        <div class="box2-title" style="margin-top: 1vh"><h1>年度碳排放统计</h1></div>
        <div><e-charts autoresize style="height: 8vh;margin-left: 0.1vw;width: 22vw" :option="option12" /></div>
        <div class="box2-title" style="margin-top: 1vh"><h1>年度产量统计</h1></div>
        <div><e-charts autoresize style="height: 8vh;margin-left: 0.1vw;width: 22vw" :option="option13" /></div>
      </div>
      <div class="box4">
        <div class="title1"><span>>></span>综合能耗</div>
        <div><e-charts autoresize style="height: 27vh;margin-left: 0.1vw;margin-top:1vh;width: 34vw" :option="option7" /></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import screenfull from 'screenfull'
export default {
  data() {
    return {
    }
  },
  computed: {
    option1() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '水定额',
              '水实际'
            ],
            [
              '工厂',
              '480',
              '412.36'
            ],
            [
              '冲压车间',
              '666',
              '797'
            ],
            [
              '车身车间',
              '458',
              '652'
            ],
            [
              '涂装车间',
              '620',
              '798.38'
            ],
            [
              '总装车间',
              '777',
              '654.38'
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option2() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '电定额',
              '电实际'
            ],
            [
              '工厂',
              '505',
              '412.36'
            ],
            [
              '冲压车间',
              '2000',
              '1222'
            ],
            [
              '车身车间',
              '1000',
              '666'
            ],
            [
              '涂装车间',
              '1350',
              '1355.38'
            ],
            [
              '总装车间',
              '950',
              '655.38'
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（kwh）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#047fdd' },
                { offset: 0.5, color: '#264dd6' },
                { offset: 1, color: '#3c2bd1' }
              ])
            }
          }
        ]
      }
    },
    option3() {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 2,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['32%', '54%'],
            avoidLabelOverlap: false,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            data: [
              {
                value: 1048, name: '天然气额定',
                label: {
                  color: '#00deff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#affdcf' },
                    { offset: 0.5, color: '#54d98c' },
                    { offset: 1, color: '#2ac96b' }
                  ])
                }
              },
              { value: 735, name: '天然气实际',
                label: {
                  color: '#00deff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#00deff'
              }
            }
          }
        ]
      }
    },
    option4() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'product',
              '水',
              '电',
              '天然气'
            ],
            [
              '工厂',
              110,
              100,
              90
            ],
            [
              '冲压车间',
              60,
              100,
              80
            ],
            [
              '车身车间',
              48.11,
              83.89,
              70
            ],
            [
              '涂装车间',
              118.07,
              77.11,
              64.82
            ],
            [
              '总装车间',
              117.14,
              92.86,
              75
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '消耗量',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#ff971a' },
                { offset: 0.5, color: '#fe661b' },
                { offset: 1, color: '#fe441b' }
              ])
            }
          }
        ]
      }
    },
    option5() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'value',
          splitLine: { show: false }
        },
        yAxis: {
          type: 'category',
          data: ['光伏'],
          splitLine: { show: false },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        legend: {
          right: 1000,
          top: 'center'
        },
        series: [
          {
            name: '当日光伏发电量',
            type: 'bar',
            data: [1888],
            barWidth: 28,
            itemStyle: {
              normal: {
                color: '#affdcf'
              }
            }

          }
        ]
      }
    },
    option6() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: ['一月', '二月', '三月', '四月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '工厂（元/台）',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（元/台）',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元/台'
              }
            },
            barWidth: 18,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                },
                label: {
                  show: true,
                  // position: 'middle',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: [100, 150, 200, 250]
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' 元/台'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: ['90', '95', '102', '110']
          }
        ]
      }
    },
    option7() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        grid: {
          right: '20%'
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        legend: {
          data: ['工厂', '指标'],
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: { // y轴文字的配置
              interval: 1,
              textStyle: {
                color: '#00deff' // Y轴内容文字颜色
              }
            },
            axisTick: {
              alignWithLabel: true
            },
            data: ['一月', '二月', '三月', '四月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { show: false },
            name: '工厂（tce）',
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            }
          },
          {
            type: 'value',
            splitLine: { show: false },
            min: 0,
            max: 0,
            position: 'left',
            offset: 110,
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            axisLabel: {
            }
          },
          {
            type: 'value',
            name: '指标（tce）',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#00deff'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#253156'
              }
            },
            axisLabel: {
            }
          }
        ],
        series: [
          {
            name: '工厂',
            type: 'bar',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' tce'
              }
            },
            barWidth: 18,
            itemStyle: {
              normal: {
                color: function(params) {
                  const colorList = [
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701'],
                    ['#64dee3', '#3ab5e1', '#0685de'],
                    ['#ff971a', '#fe661b', '#fe441b'],
                    ['#affdcf', '#54d98c', '#2ac96b'],
                    ['#047fdd', '#264dd6', '#3c2bd1'],
                    ['#fdd401', '#fdb602', '#fc9701']
                  ]
                  let index = colorList[params.dataIndex]
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length
                  }
                  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: index[0]
                    },
                    {
                      offset: 0.5,
                      color: index[1]
                    },
                    {
                      offset: 1,
                      color: index[2]
                    }
                  ], false)
                },
                label: {
                  show: true,
                  // position: 'middle',
                  textStyle: {
                    color: '#fff',
                    fontSize: 16
                  }
                }
              }
            },
            data: [100, 150, 200, 250]
          },
          {
            name: '指标',
            type: 'line',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' tce'
              }
            },
            yAxisIndex: 2,
            itemStyle: {
              color: 'red'
            },
            data: ['90', '95', '102', '110']
          }
        ]
      }
    },
    option8() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '水定额',
              '水实际'
            ],
            [
              '工厂',
              '480',
              '412.36'
            ],
            [
              '冲压车间',
              '666',
              '797'
            ],
            [
              '车身车间',
              '458',
              '652'
            ],
            [
              '涂装车间',
              '620',
              '798.38'
            ],
            [
              '总装车间',
              '777',
              '654.38'
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（t）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          }
        ]
      }
    },
    option9() {
      return {
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 20,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        tooltip: {},
        dataset: {
          source: [
            [
              'project',
              '电定额',
              '电实际'
            ],
            [
              '工厂',
              '505',
              '412.36'
            ],
            [
              '冲压车间',
              '2000',
              '1222'
            ],
            [
              '车身车间',
              '1000',
              '666'
            ],
            [
              '涂装车间',
              '1350',
              '1355.38'
            ],
            [
              '总装车间',
              '950',
              '655.38'
            ],
            [
              '光伏',
              '',
              955
            ]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          name: '单位（kwh）',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#253156'
            }
          },
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#00deff'
            }
          },
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + 'kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#affdcf' },
                { offset: 0.5, color: '#54d98c' },
                { offset: 1, color: '#2ac96b' }
              ])
            }
          },
          {
            type: 'bar',
            barWidth: '15%',
            tooltip: {
              valueFormatter: function(value) {
                return value + ' kwh'
              }
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#fdd401' },
                { offset: 0.5, color: '#fdb602' },
                { offset: 1, color: '#fc9701' }
              ])
            }
          }
        ]
      }
    },
    option10() {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 2,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['32%', '54%'],
            avoidLabelOverlap: false,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' m³'
              }
            },
            data: [
              {
                value: 1048, name: '天然气额定',
                label: {
                  color: '#00deff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#affdcf' },
                    { offset: 0.5, color: '#54d98c' },
                    { offset: 1, color: '#2ac96b' }
                  ])
                }
              },
              { value: 735, name: '天然气实际',
                label: {
                  color: '#00deff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#fdd401' },
                    { offset: 0.5, color: '#fdb602' },
                    { offset: 1, color: '#fc9701' }
                  ])
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#00deff'
              }
            }
          }
        ]
      }
    },
    option11() {
      return {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          itemHeight: 5,
          itemWidth: 15,
          top: 2,
          textStyle: {
            color: '#00deff',
            fontSize: 12
          }
        },
        series: [
          {
            type: 'pie',
            radius: ['32%', '54%'],
            avoidLabelOverlap: false,
            tooltip: {
              valueFormatter: function(value) {
                return value + ' t'
              }
            },
            data: [
              {
                value: 1048, name: '碳排放额定',
                label: {
                  color: '#00deff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#affdcf' },
                    { offset: 0.5, color: '#54d98c' },
                    { offset: 1, color: '#2ac96b' }
                  ])
                }
              },
              { value: 735, name: '碳排放实际',
                label: {
                  color: '#00deff'
                },
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#047fdd' },
                    { offset: 0.5, color: '#264dd6' },
                    { offset: 1, color: '#3c2bd1' }
                  ])
                }
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#00deff'
              }
            }
          }
        ]
      }
    },
    option12() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right: 'right',
          padding: [1000, 50, 0, 0]
        },
        grid: {
          right: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['']
        },
        series: [
          {
            name: '实际',
            type: 'bar',
            barWidth: '60%',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '实际' + params.value + 't' + `占年度指标10%`
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [20]
          },
          {
            name: '年度',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '       ' + '年度指标' + params.value + 't'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + 't'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [20]
          }
        ]
      }
    },
    option13() {
      return {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          right: 'right',
          padding: [1000, 50, 0, 0]
        },
        grid: {
          right: '4%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: { // y轴文字的配置
            textStyle: {
              color: '#00deff' // Y轴内容文字颜色
            }
          }
        },
        yAxis: {
          type: 'category',
          data: ['']
        },
        series: [
          {
            name: '实际',
            type: 'bar',
            barWidth: '60%',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '实际' + params.value + '台' + `占年度指标10%`
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + '台'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [400]
          },
          {
            name: '年度',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              textStyle: {
                color: '#fff'
              },
              formatter: function(params) { // 核心部分 formatter 可以为字符串也可以是回调
                if (params.value) { // 如果当前值存在则拼接
                  return '       ' + '年度指标' + params.value + '台'
                } else { // 否则返回个空
                  return ''
                }
              }
            },
            tooltip: {
              valueFormatter: function(value) {
                return value + '台'
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: [400]
          }
        ]
      }
    }
  },
  methods: {
    info() {
      screenfull.toggle()
      this.$router.push('/energy/nengyuan')
    }
  }
}
</script>

<style scoped>
  .box{
    width: 100%;
    height: calc(100vh - 50px);
    background-image: url("../../assets/charts-bg.jpg");
    background-size: 100% 100%;
    background-color: #0c1330;
    background-repeat: no-repeat;
    overflow: hidden;
  }
  .box-title{
    font-size: 28px;
    color: #00deff;
    text-align: center;
  }

  .bottom-box{
    width: 98%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .box2{
    width: 36%;
    height: 26vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box3{
    width: 27.5%;
    height: 26vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box4{
    width: 36%;
    height: 26vh;
    background-image: url("../../assets/box1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .box1-title h1{
    color: #fff;
    text-align: center;
    font-size: 14px;
    margin-top: 8px;
  }
  .box2-title h1{
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding-top: 4px;
  }
  .top-title h1{
    color: #fff;
    text-align: center;
    font-size: 16px;
  }
  .box1-charts{
    display: flex;
    justify-content: space-evenly;
  }
  .title1{
    color: #00deff;
    margin-left: 8px;
    font-size: 16px;
    margin-top: 8px;
  }
  .top-box{
    width: 98%;
    height:28vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-image: url("../../assets/box1.png");
    margin: 0 auto;
    overflow: hidden;
  }
  .m-box{
    width: 98%;
    height: 28vh;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin: 0 auto;
    background-image: url("../../assets/box1.png");
    overflow: hidden;
  }
  .charts-txt p{
    color: #fff;
    text-align: center;
    font-size: 15px;
  }
  .charts-txt span {
    color: #00deff;
    font-size: 15px;
  }
  .full{
    position: fixed;
    cursor:pointer;
    color: #00deff;
    font-size: 14px;
    border: 1px solid #00deff;
    padding: 3px 10px;
    margin-left: 1vw;
    margin-top: -30px;
    width: 50px;
  }
</style>
